import './index.css'

export default function Header(props) {

  function handleKeyUp(e) {
    let {key, target} = e
    if (key === 'Enter') {
      if (target.value.trim() === '') {
        alert('请输入内容！')
      } else {
        const todoObj = {id: new Date().getTime(), name: target.value, done: false}
        props.handleAddTodo(todoObj)
        target.value = ''
      }
    }
  }

  return (
    <div className="todo-header">
      <input type="text" onKeyUp={handleKeyUp} placeholder="请输入任务名称，按回车键确认"/>
    </div>
  )
}
